<template>
  <div>

    <el-card class="table-data-card">
      <template #header>
        <span>预约列表</span>
      </template>
      <Table
        ref="tableInfoRef"
        :columns="columns"
        :fetch="loadDataList"
        :dataSource="tableData"
        :options="tableOptions"
        :extHeight="tableOptions.extHeight"
      >
        <template #slotStatus="{ index, row }">
          <div class="row-op-panel">
            <Badge showType="red" text="被驳回" v-if="row.status == -1"></Badge>
            <Badge showType="green" text="待确认" v-if="row.status == 0"></Badge>
            <Badge showType="yellow" text="已确认" v-if="row.status == 1"></Badge>
            <Badge showType="blue" text="已完成" v-if="row.status == 2"></Badge>
            <Badge showType="red" text="已取消" v-if="row.status == 3"></Badge>
          </div>
        </template>

        <template #methodType="{ index, row }">
          <div class="row-op-panel">
            <Badge showType="green" text="线上" v-if="row.method == 1"></Badge>
            <Badge showType="blue" text="线下" v-if="row.method == 0"></Badge>
          </div>
        </template>

        <template #roleNames="{ index, row }">
          <div class="row-op-panel">
              <span v-if="row.role==0">普通用户</span>
              <span v-else>管理员</span>
          </div>
        </template>

        <template #avatorStatus="{ index, row }">
          <div class="row-op-panel">
              <Cover v-if="row.imgPath!=null" :cover="row.imgPath" :width="100" :height="100"></Cover>
              <el-avatar v-else :size="40" >
                  <div class="icon">{{ (row.username||"")[0]}}</div>
              </el-avatar>
          </div>
        </template>

        <template #slotOperation="{ index, row }">
          <div
            class="row-op-panel"
          >

          <a
              v-if="row.status==0"
              href="javascript:void(0)"
              @click.prevent="delInfo(row)"
              >删除</a
            >

             <a
              v-if="row.status==0"
              href="javascript:void(0)"
              @click.prevent="changeApplyStatus(row,'1')"
              >确认</a
            >
            <span
              v-else
              style="margin-right: 10px; color: rgb(170, 176, 182);"
              class="a-link"
              >确认</span
            >
            <a
               v-if="row.status==1"
              class="a-link"
              href="javascript:void(0)"
              @click.prevent="changeApplyStatus(row,'3')"
              >取消</a
            >
            <span
              v-else
              style="margin-right: 10px;color: rgb(170, 176, 182);"
              class="a-link"
              >取消</span
            >
            <!-- <span
              v-if="row.status==2"
              style="margin-right: 10px;"
              class="a-link"
              >评价</span
            > -->
          </div>
        </template>
      </Table>
    </el-card>
  </div>
</template>

<script setup>
import { getCurrentInstance, nextTick, ref } from "vue";
const { proxy } = getCurrentInstance();


const userInfo = ref(
  proxy.VueCookies.get("userInfo")||null);
const api = {
  loadDataList: "/appointment/loadAppointment4User",
  delAccount: "/appointment/delInfo",
  updateStatus: "/appointment/updateStatus4User",
};
const searchForm = ref({});
const tableData = ref({});
const tableOptions = ref({
  extHeight: 125,
});

const columns = [
 {
    label: "预约编号",
    prop:"counselorId",
  },
  {
    label: "预约时间",
    prop: "appointmentTime",
  },
  {
    label: "方式",
    scopedSlots: "methodType",
  },
  {
    label: "备注信息",
    prop: "remark",
  },
  {
    label: "创建时间",
    prop: "createTime",
  },
  {
    label: "更新时间",
    prop: "updateTime",
  },
  {
    label: "状态",
    prop: "status",
    scopedSlots: "slotStatus",
  },
  {
    label: "操作",
    prop: "operation",
    scopedSlots: "slotOperation",
  },
];

const tableInfoRef = ref();

const loadDataList = async () => {
  let params = {
    pageNo: tableData.value.pageNo,
    pageSize: tableData.value.pageSize,
  };
  Object.assign(params, searchForm.value);
  let result = await proxy.Request({
    url: api.loadDataList,
    params: params,
  });
  if (!result) {
    return;
  }
  Object.assign(tableData.value, result.data);
};


//启用禁用
const changeApplyStatus = (data,status) => {
  let info = status == 0 ? "取消" : "确认";
  proxy.Confirm(`确定要【${info}】【${data.username}】的预约吗？`, async () => {
    let result = await proxy.Request({
      url: api.updateStatus,
      params: {
          appointmentId: data.appointmentId,
          status: status,
      },
    });
    if (!result) {
      return;
    }
    proxy.Message.success("操作成功");
    loadDataList();
  });
};
</script>

<style lang="scss" scoped>
.detail-tree-panel {
  height: calc(100vh - 273px);
  overflow: auto;
  width: 100%;
}
</style>
